import React, { useEffect, useState } from 'react';
import {
  Box,
  Datepicker,
  Grid,
  GridItem,
  Input,
  MainButton,
  NumberInput,
  Text,
  SecondaryButton,
} from '@nova-hf/ui';
import { inject, observer } from 'mobx-react';
import { useRouter } from 'next/router';
import { useCustomerNameLazyQuery } from 'typings/graphql';
import Steps from 'beta/store/steps';
import { useTranslation } from 'beta/utils/i18n';
import { parseMainColor } from 'beta/utils/typeGuards';

type MoveNumberProps = {
  color?: string;
  steps: Steps;
  phoneNumber: string;
};

const MoveNumber = ({ steps, phoneNumber, color }: MoveNumberProps) => {
  const COLOR = parseMainColor(color ?? 'pink', 'pink');
  const { t } = useTranslation('alltSaman');
  const router = useRouter();
  const customerId = router.query.customerId;
  const contractId = router.query.contractId;
  const date = new Date();
  const [nationalId, setNationalId] = useState('');
  const [name, setName] = useState('');
  const [dateOfMove, setdateOfMove] = useState(date);

  const [getCustomer] = useCustomerNameLazyQuery({
    onCompleted(data) {
      if (data) {
        if (data.customer?.name && data.customer.nationalId) {
          setName(data.customer.name);
          setNationalId(data.customer.nationalId);
        }
      }
    },
  });

  useEffect(() => {
    getCustomer({
      variables: { input: { id: customerId?.toString() } },
    });
  }, []);

  const onSubmit = () => {
    router.push(`/beta/${customerId}/askriftir/${contractId}`);
  };

  return (
    <Box>
      <Box marginBottom={5}>
        <Text variant="h4">{t('alltSaman.moveToNova')}</Text>
      </Box>
      <Box marginBottom={3}>
        <Text variant="subtitleBold">{t('alltSaman.easyToMove')}</Text>
      </Box>
      <Box>
        <Box marginBottom={8}>
          <Text>{t('alltSaman.novaInfo')}</Text>
        </Box>
      </Box>
      <Grid gridTemplate={{ sm: 4, md: 8 }}>
        <GridItem gridColumn={{ sm: 'span4' }}>
          <NumberInput
            id="nationalId"
            numberType="nationalId"
            label={t('alltSaman.ssn')}
            name="service"
            value={nationalId}
            disabled
          />
        </GridItem>
        <GridItem gridColumn={{ sm: 'span4' }}>
          <Input id="name" label={t('alltSaman.name')} name="service" value={name} disabled />
        </GridItem>
        <GridItem gridColumn={{ sm: 'span4' }}>
          <NumberInput
            id="tel"
            numberType="tel"
            label={t('alltSaman.phoneNumber')}
            name="service"
            value={phoneNumber}
            disabled
          />
        </GridItem>
        <GridItem gridColumn={{ sm: 'span4' }}>
          <Box>
            <Datepicker
              onSelect={(value: Date) => setdateOfMove(value)}
              selected={dateOfMove}
              minDate={date}
              color={COLOR}
              inputId={'date'}
              inputName={t('alltSaman.dayOf')}
            />
          </Box>
        </GridItem>
        <GridItem gridColumn={{ sm: 'span8' }}>
          <Box
            backgroundColor="white"
            dottedShadow="medium"
            display="flex"
            flexDirection="column"
            columnGap={3}
            marginY={3}
          >
            <Text variant="subtitleBold">{t('alltSaman.wantNewNumber')}</Text>
            <Text>{t('alltSaman.numberPot')}</Text>
            <Box marginBottom={3}>
              <SecondaryButton
                colorScheme={COLOR}
                text={t('alltSaman.seeNewNumbers')}
                icon="longArrowRight"
              ></SecondaryButton>
            </Box>
          </Box>
        </GridItem>
        <>
          <GridItem gridColumn={{ sm: 'span4', md: '3/5' }}>
            <MainButton
              colorScheme="black100"
              text={t('alltSaman.back')}
              onClick={() => steps?.prev()}
              dottedShadow="none"
            />
          </GridItem>
          <GridItem gridColumn={{ sm: 'span4', md: '6/8' }}>
            <MainButton
              text={t('alltSaman.confirm')}
              colorScheme={COLOR}
              onClick={onSubmit}
              isDisabled={phoneNumber.length !== 7}
            />
          </GridItem>
        </>
      </Grid>
    </Box>
  );
};

export default inject('steps')(observer(MoveNumber));